<template>
    <div class="components_edit_modal">
        <el-dialog title="课程考核方案详情" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="学校：" >
                    {{form.schoolName}}
                </el-form-item>
                <el-form-item label="学院：">
                    {{form.secondSchoolName}}
                </el-form-item>
                <el-form-item label="所属专业：" >
                    {{form.professionName}}
                </el-form-item>
                <el-form-item label="所授课程：" >
                    {{form.courseName}}
                </el-form-item>


                <el-form-item label="考核内容：" class="lineblock">
                    {{form.content}}
                </el-form-item>
                <br>
                    <el-form-item label="考核要求："  class="lineblock">
                        {{form.requirement}}
                    </el-form-item>
                <br>
                    <el-form-item label="备注：" class="lineblock">
                        {{form.remark}}
                    </el-form-item>
                <br>
                    <el-form-item label="成绩配比：" class="lineblock scrollBarX">
                        <el-table :data="form.detailList" style="width: 100%" show-summary :summary-method="getSummaries" class="components_edit_tables bordright">
                            <el-table-column label="考核项" prop="scoreTypeText">
                            </el-table-column>

                            <el-table-column label="占比(%)" prop="scorePercent">
                            </el-table-column>

                            <el-table-column  label="备注说明" prop="remark">
                            </el-table-column>
                        </el-table>

                    </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import { mapGetters } from 'vuex'
    export default {
        components: {

        },
        data() {
            return {
                 // state: false,
                 courseAssessmentId: null,
                 rules: {
                    grade: [
                        { required: true, message: '请选择年级', trigger: 'change', type: 'string'},
                    ],
                    content: [
                        { required: true, message: '请填写考核内容', trigger: 'blur', type: 'string'},

                    ],
                    requirement: [
                        { required: true, message: '请填写考核要求', trigger: 'blur', type: 'string'},
                    ],
                    attachment: [
                        { required: true, message: '请选择上传附件', trigger: 'change', type: 'array'},
                    ],
                 },
                form: {
                    id: null,
                    trainPlanId: null,
                    schoolId:null,
                    schoolName: null,
                    secondSchoolId:null,
                    secondSchoolName: null,
                    professionId:null,
                    professionName:null,
                    grade:null,
                    courseNo:null,
                    courseName:null,
                    content:null,
                    requirement:null,
                    remark:null,
                    detailList:[],
                },
                // 课程列表
                courseList: null,
                // 成绩类型列表
                scoreTypeList:null,

            }
        },
        created() {},
        mounted() {},
        computed: {
            state: {
                get: function () {
                    if(this.$store.getters.getCourseAssessmentSchemeDetail.state == true){
                        let data = this.$store.getters.getCourseAssessmentSchemeDetail.data;
                        this.courseAssessmentId = data.courseAssessmentScheme.id;
                        // 根据id查询课程考核方案信息
                        this.getCourseAssessmentSchemeInfo();
                    }
                    return this.$store.getters.getCourseAssessmentSchemeDetail.state;
                },
                set: function (v) {
                   if(!v){
                        this.$store.commit("COURSE_ASSESSMENT_SCHEME_DETAIL", {dialogState: v, data: null});
                   }
                }
            }
        },
        methods: {
            // 根据主键id查询课程考核方案信息
            getCourseAssessmentSchemeInfo(){
                let vm = this;
                vm.axios.get(api.courseAssessmentScheme.queryById + vm.courseAssessmentId).then((response) => {
                    if (response.data.success) {
                        vm.form = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            getScoreType(){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl, {
                     params: {
                        type: "assessment_score_type",
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.scoreTypeList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 保存
            submit() {
                let vm = this;
                vm.$refs['form'].validate((valid) => {
                    if (valid) {
                        // 组装数据
                        let model = {
                            id: vm.courseAssessmentId,
                            content: vm.form.content,
                            requirement: vm.form.requirement,
                            remark: vm.form.remark,
                            detailList : vm.form.detailList,
                        };
                        console.log(model);
                       // return;
                        vm.axios.put(api.courseAssessmentScheme.update ,model)
                        .then((response) => {
                            if (response.data.success) {
                                vm.$message({
                                    type: 'success',
                                    message: response.data.msg,
                                });
                                // 关闭弹出窗口
                                vm.state = false;
                                // 刷新table
                                vm.$parent.$refs.courseAssessmentTable.$emit('vuetable:refresh');
                            } else {
                                vm.$message.error(response.data.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            // 表格合计列
            getSummaries(params){
                let vm = this;
                const { columns, data } = params;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }else if(index == 1){
                        const values = vm.form.detailList.map(item => Number(item.scorePercent));
                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                            // sums[index] += ' 元';
                        }
                    }else {
                        sums[index] = '';
                    }
                })
                return sums;
            }
        },
    };
</script>
<style>
</style>